<template>
  <el-dialog v-model="dialogVisible" title="详情" width="80%" destroy-on-close center draggable>
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="月份">
        <el-date-picker
          v-model="searchData.month"
          :format="customDateTimeFormat"
          :value-format="customDateTimeFormat"
          type="month"
          placeholder="请选择月份"
          clearable
        />
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="searchData.type" placeholder="请选择" clearable>
          <el-option label="入库" value="enter" />
          <el-option label="出库" value="out" />
        </el-select>
      </el-form-item>
      <el-form-item label="先款先票">
        <el-select v-model="searchData.checks" placeholder="请选择" clearable>
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="开票">
        <el-select v-model="searchData.invoicings" placeholder="请选择" clearable>
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="其他">
        <el-select v-model="searchData.other" placeholder="请选择" clearable>
          <el-option label="自己" value="1" />
          <el-option label="同事" value="2" />
          <el-option label="第三方" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form-item>
    </el-form>
    <el-divider border-style="dotted" />
    <el-upload
      class="upload-demo"
      :action="apiUrl"
      :on-success="handleSuccess"
      :file-list="fileList"
      :headers="UploadHeaders"
      name="files"
      accept=".xls, .xlsx"
      :data="UploadData"
    >
      <el-button size="small" type="primary">上传文件</el-button>
    </el-upload>
    <el-divider border-style="dotted" />
    <div class="list-container">
      <div class="list-column">
        <div v-for="(item, index) in array1" :key="'array1-' + index" class="list-item">
          {{ item }}
        </div>
      </div>
      <div class="list-column">
        <div v-for="(item, index) in array2" :key="'array2-' + index" class="list-item">
          {{ item }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { getToken } from "@/utils/cache/cookies"
import dayjs from "dayjs"
const currentDate = dayjs()
const customDateTimeFormat = ref<string>("YYYY-MM")

// 数据绑定
const fileList = ref<any[]>([]) // 存储上传文件列表
const dialogVisible = ref(false) // 控制弹窗的显示
const apiUrl = import.meta.env.VITE_BASE_API + "/Common/getUpload"
const UploadHeaders = {
  "X-Token": getToken()
}
const uid = ref<number>(0)
const UploadData = {
  uploadType: "commissions",
  checks: "",
  invoicings: "",
  type: "",
  month: currentDate.format("YYYY-MM"),
  other: "",
  uid: 0
}
const searchData = reactive({
  checks: "",
  invoicings: "",
  type: "",
  month: currentDate.format("YYYY-MM"),
  other: "",
  uid: 0
})

const onSubmit = () => {
  console.log("submit!", searchData)
  UploadData.checks = searchData.checks
  UploadData.invoicings = searchData.invoicings
  UploadData.type = searchData.type
  UploadData.month = searchData.month
  UploadData.other = searchData.other
  UploadData.uid = searchData.uid
}
// 上传成功
const handleSuccess = (response: any, file: any, fileList: any) => {
  console.log("上传成功", response, file, fileList)
  if (response.code === 200) {
    // 上传成功，清空文件列表
    array1.value = response.data.list1
    array2.value = response.data.list2
    fileList.value = []
  } else {
    // 上传失败，显示错误信息
    alert(response.msg)
  }
}

const dialogShow = async (row: any) => {
  console.log("row", row)
  uid.value = row.uid
  UploadData.uid = row.uid
  UploadData.month = row.month
  searchData.uid = row.uid
  searchData.month = row.month
  // 显示弹窗
  dialogVisible.value = true
}

defineExpose({ dialogShow })

// 定义两个一维数组数据
const array1 = ref([1, 3, 5, 7, 9])
const array2 = ref([2, 4, 6, 8, 10])
</script>

<style scoped>
.upload-container {
  padding: 20px;
}

.upload-demo {
  margin-bottom: 20px;
}

.list-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  max-height: 380px; /* 设置最大高度，可以根据实际需求调整 */
  overflow-y: auto; /* 超出时显示纵向滚动条 */
}

.list-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-item {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  list-style-type: none; /* 移除默认的点样式 */
}
</style>
